import { emRow, emCol } from "./index.js";
import './demo.scss'
export default {
  title: "Example/Grid",
  component: { emRow, emCol },
};

export const Default = (args, { argTypes }) => ({
  storyName: "Default",
  props: Object.keys(argTypes),
  components: { emRow, emCol },
  data: () => ({
    style1: { height: 40 + "px" },
    style2: { background: "#00bfff", height: 40 + "px" },
  }),
  template: `
    <div class="grid">
    <div class="show-block">
      <em-row>
        <em-col :style="style1" :span="6">
          <div :style="style2">1</div>
        </em-col>
        <em-col :style="style1" :span="6">
          <div :style="style2">2</div>
        </em-col>
        <em-col :style="style1" :span="6">
          <div :style="style2">3</div>
        </em-col>
        <em-col :style="style1" :span="6">
          <div :style="style2">4</div>
        </em-col>
      </em-row>
    </div>
    <div class="show-block">
      <em-row >
        <em-col :style="style1" :span="6" :offset="2">
          <div :style="style2">offset = 2</div>
        </em-col>
        <em-col :style="style1" :span="6" :offset="2">
          <div :style="style2">offset = 2</div>
        </em-col>
      </em-row>
    </div>
    <div class="show-block">
      <em-row  type="flex">
        <em-col class="height1 color1" :span="6">
          <div class="">F</div>
        </em-col>
        <em-col class="height2 color2" :span="6">
          <div class="">L</div>
        </em-col>
        <em-col class="height3 color1" :span="6">
          <div class="">E</div>
        </em-col>
        <em-col class="height4 color2" :span="6">
          <div class="">X</div>
        </em-col>
      </em-row>
    </div>
</div>
    `,

});


Default.argTypes = {
  span: {
    description:'单元格24等分',
  }, //返回指定输出格式
  offset: {    description:'偏移位置',},
  xs: {  description:'',},
  sm: { description:'',   },
  md: { description:'',},
  lg:{description:''},
  xl:{description:''}
};

Default.args={}